<template>
	<view class="top">
		<wd-navbar title="邀请好友" right-text="我的邀请">
			<template #left>
				<wd-icon @click="goBok" name="arrow-left1" size="22" />
			</template>
		</wd-navbar>
		<view class="content">
			<image src="/static/yaoqing.png" mode="" class="bg"></image>
			<image :src="`http://59.110.166.212:8006/api/common/qrcode?scene=${code}`" mode="" class="QrCode"></image>
			<view class="yaoqingID">
				<!-- 邀请码：1111111 -->
			</view>
			<view class="title1">扫码邀请</view>
			<view class="title2">活动规则</view>
			<button class="btn" open-type="share">
				链接邀请
			</button>
			<view class="content">
				<view class="txt">
					1.兼职服务员推广商家奖励6%
				</view>
				<view class="txt">
					2.商务推荐商务人员服务奖励被引荐人业绩的1%
				</view>
				<view class="txt">
					3.商家可以直接成为兼职商务，得被推荐商务业绩1%
				</view>
				<view class="txt">
					4.10个商务为一个组，组长拿整个组业绩的1%
				</view>
				<view class="txt">
					5.8个组长为一个团，团长拿整个团的1%
				</view>
				<view class="txt">
					6.5个团为一个部，部长拿整个部1%
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import { user, verified,getQr } from '@/api/index.js';
	import { utils } from '@/utils/utils.js';
	import { onLoad, onShow,onShareAppMessage} from '@dcloudio/uni-app';
	import { ref } from 'vue';
	const token = ref(uni.getStorageSync('token'))
	const code = ref("")
	const userProfile = ref({}); //存储用户信息
	const goBok = () => {
		uni.navigateBack();
	};
	onShow(() => {
	    userInfo(); //获取用户信息
		getcode()
	});
	const userInfo = async () => {
	    const ret = await user();
	    if (ret.code == 1) {
	        userProfile.value = ret.data;
			code.value = ret.data.invite_code
	        // console.log('个人信息', userProfile.value);
	    } else {
	        utils('数据加载失败！');
	    }
	};
	const getcode = async ()=>{
		  const ret = await getQr();
		  console.log(ret)
	};
	onShareAppMessage((res)=> {
		// console.log(res)
	 //    if (res.from === 'button') {// 来自页面内分享按钮
	 //      console.log('转发',res.target)
	 //    }
	    return {
	      title: '分享',
	      path: `/pages/index/index?code=${code.value}`
	    }
	  })
</script>

<style lang="scss" scoped>
	.top {
		margin-top: 50rpx;
		position: relative;
	}

	.content {
		width: 100%;
		position: relative;

		.bg {
			width: 100%;
			height: 2285rpx;
		}

		.QrCode {
			width: 320rpx;
			height: 320rpx;
			position: absolute;
			top: 840rpx;
			left: 215rpx;
		}

		.btn {
			width: 688rpx;
			height: 100rpx;
			position: absolute;
			top: 1348rpx;
			left: 38rpx;
			background: linear-gradient(180deg, #F57651 100%, #FE4546 100%);
			border-radius: 50rpx;
			box-shadow: 0 8rpx 8rpx 0rpx rgba(253, 76, 71, 0.36);
			color: #fff;
			display: flex;
			align-content: center;
			justify-content: center;
			font-size: 44rpx;
			line-height: 100rpx;
		}

		.title1 {
			height: 40rpx;
			font-size: 40rpx;
			width: 100%;
			position: absolute;
			top: 722rpx;
			text-align: center;
			color: #fff;
			left: 0;
			line-height: 40rpx;
		}

		.title2 {
			height: 40rpx;
			font-size: 40rpx;
			width: 100%;
			position: absolute;
			top: 1493rpx;
			text-align: center;
			color: #fff;
			left: 0;
			line-height: 40rpx;
		}

		.content {
			width: 642rpx;
			height: 640rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: absolute;
			top: 1574rpx;
			// background: green;
			color: #F57651;
			left: 62rpx;
			display: flex;
			justify-content: left;
			align-items: center;
			flex-wrap: wrap;

			.txt {}
		}
		.yaoqingID{
			width: 450rpx;
			background: #fff;
			position: absolute;
			top: 1207rpx;
			text-align: center;
			left: 150rpx;
			height: 60rpx;
			font-size: 30rpx;
			line-height: 60rpx;
		}
	}
</style>